<template>
  <div>
    <div v-transfer-dom class="clockSearchBox" v-if="isShowClockSearch">
      <transition name="fade-opacity">
        <div v-if="isShowClockSearch" class="c-translucent-balck50 c-text-hidden c-pz1 c-w100 c-h c-pa c-p-l0 c-p-t0" @click="clockSearchHide" data-type="cancel"></div>
      </transition>
      <transition name="fade-translate-y">
        <div class="c-bg-white c-br-tr20 c-br-tl20 c-pz1 c-pa c-p-l0 c-p-b0 c-p-r0" v-if="isShowClockSearch">
          <div class="c-w100 c-bg-white c-br-tr20 c-br-tl20 c-p">
            <div class="c-textAlign-c searchead">筛选</div>
            <div class="c-pa c-p-t0 c-p-r16 c-hh76 c-fc-sgray c-flex-row c-flex-center c-fs24">
              <i class="iconfont show c-fs24 c-mr10 icon-guanbi" @click="clockSearchHide"></i>
            </div>
          </div>
          <div class="c-ph24">
            <div class="c-fs24 c-fw600">打卡时间</div>
            <div class="c-flex-row c-aligni-center c-justify-sb c-mt14">
              <div class="c-bg-sgray c-ww260 c-pv8 c-br10 c-hh52">
                <group class="c-textAlign-r c-w100 c-fs24 c-fc-xblack selectDate">
                  <datetime
                    v-model="starTime"
                    :placeholder="'请选择日期'"
                    :end-date="maxtime"
                    format="YYYY-MM-DD"
                    @on-change="change"
                    :themeColor="$getThemeColor()"
                    title="">
                  </datetime>
                </group>
              </div>
              <div class="c-fs24 c-fc-xblack">至</div>
              <div class="c-bg-sgray c-ww260 c-pv8 c-br10 c-hh52">
                <group class="c-textAlign-r c-w100 c-fs24 c-fc-xblack selectDate">
                  <datetime
                    v-model="endTime"
                    :placeholder="'请选择日期'"
                    :start-date="mintime"
                    format="YYYY-MM-DD"
                    :themeColor="$getThemeColor()"
                    @on-change="change"
                    title="">
                  </datetime>
                </group>
              </div>
            </div>
            <div class="c-fs24 c-fw600 c-mt30">点评情况</div>
            <div class="c-mt14">
              <div class="c-flex-row c-aligni-center c-bg-sgray c-pv8 c-br10 c-fs24 c-fc-sgray c-ph20">
                <div class="c-flex-row c-aligni-center c-justify-sb c-fs24 c-w100" v-show="sortTypeName.length > 0">
                  <popup-picker :themeColor="$getThemeColor()" class="selectPicker c-mr10 c-flex-grow1" title="" style="c-w100" v-model="selectItemsort" :data="sortTypeName" @on-change="changeSelectsort"></popup-picker>
                  <span class="iconfont c-fs18 c-fc-sgray c-rotate90">&#xe635;</span>
                </div>
              </div>
            </div>
            <div class="c-fs24 c-fw600 c-mt30">{{workType == 1 ? '打卡主题' : workType == 2 ?'打卡作业' : '打卡关卡'}}</div>
            <div class="c-mt14">
              <div class="c-flex-row c-aligni-center c-bg-sgray c-pv8 c-br10 c-fs24 c-fc-sgray c-ph20" v-if="workType == 1">
                <div class="c-flex-row c-aligni-center c-justify-sb c-fs24 c-w100" v-show="selectTittle.length > 0">
                  <popup-picker :themeColor="$getThemeColor()" class="selectPicker c-mr10 c-flex-grow1" title="" style="c-w100" v-model="selectItemTime" :data="selectTittle" @on-change="changeSelectTime"></popup-picker>
                  <span class="iconfont c-fs18 c-fc-sgray c-rotate90">&#xe635;</span>
                </div>
              </div>
              <div v-else class="c-flex-row c-aligni-center c-bg-sgray c-pv8 c-br10 c-fs24 c-fc-sgray c-ph20">
                <div class="c-flex-row c-aligni-center c-justify-sb c-fs24 c-w100" @click="showWorkList">
                  <div class="selectPicker classList c-mr10 c-flex-grow1 c-fc-xblack">{{workListName}}</div>
                  <span class="iconfont c-fs18 c-fc-sgray c-rotate90">&#xe635;</span>
                </div>
              </div>
            </div>
            <div class="c-fs24 c-fw600 c-mt30">打卡分组</div>
            <div class="c-mt14">
              <div class="c-flex-row c-aligni-center c-bg-sgray c-pv8 c-br10 c-fs24 c-fc-sgray c-ph20">
                <div class="c-flex-row c-aligni-center c-justify-sb c-fs24 c-w100" @click="showClass">
                  <div class="selectPicker classList c-mr10 c-flex-grow1 c-fc-xblack">{{className}}</div>
                  <span class="iconfont c-fs18 c-fc-sgray c-rotate90">&#xe635;</span>
                </div>
              </div>
            </div>
          </div>
          <div class="c-ph24 c-pv40 c-flex-row c-aligni-center c-justify-sb">
            <div class="theme-bd1 theme-fc c-br32 c-fs28 c-textAlign-c c-ww280 c-br32 c-pv12" @click="removeSearch">重置</div>
            <div class="theme-bg c-fs28 c-fc-white c-textAlign-c c-ww280 c-br32 c-pv12" @click="sureSearch">确认</div>
          </div>
        </div>
      </transition>
    </div>
    <clock-choose :showClassListid='classId' :showClassListName='className' :isShowClockchoose="isShowClockchoose" :chooseList='classList' @clockChooseHide='clockChooseHide' @clockChooseSure='clockChooseSure'></clock-choose>
    <clock-workList :workType='workType' :showWorkListId='hwId' :showWorkListName='WorkListName' :isShowWorkListchoose="isShowWorkListchoose" :workList='workList' @clockWorkListHide='clockWorkListHide' @clockWorkerListSure='clockWorkerListSure'></clock-workList>
  </div>
</template>

<script>
import { Datetime } from 'ckjrweb-mp-ui/src/components/index';
import { PopupPicker } from 'ckjrweb-mp-ui/src/components/index'
import clockChoose from "@/components/templates/clockIn/clockChoose.vue";
import clockWorkList from "@/components/templates/clockIn/clockChooseWorkList.vue";
import {
  utilJs
} from "@/utils/common.js";
export default {
  name: "NewSearchBar",
  components: {
    PopupPicker,
    Datetime,
    clockChoose,
    clockWorkList
  },
  props: {
    isShowClockSearch: {
      type: Boolean,
      default: false
    },
    // selectTittle下拉框数据
    selectTittle: {
      type: Array,
      default: () => []
    },
    clockInId: {
      type: String,
      default: ""
    },
    workType: {
      type: Number,
      default: 1
    },
    isStudent:{
      type: Number,
      default: 0
    },
    day: {
      type: String,
      default: ""
    }
  },
  data() {
    return {
      theme: localStorage.getItem("colorName") || "mb5_default",
      selectItemTime: [], //选择的打卡主题情况
      selectItemsort:[], //选择的点评情况
      maxtime:'',
      mintime:'',
      starTime:'', //选择的开始时间情况
      endTime:'', //选择的结束时间情况
      calendarTime:[],
      selectTittle: [],
      classList: [],
      workList: [],
      classId:'', //选择的分组id
      hwId:'', //选择的分组id
      className:'所有成员', //选择的分组名称
      workListName:'',
      sortTypeName:[],
      addressvalue:'',
      isShowClockchoose:false,
      isShowWorkListchoose:false
    }
  },
  watch: {
    selectTittle: function (val) {
      if (val.length > 0) {
        if (this.isStudent == 1) {
          val[0].forEach(item => {
            if (this.day == item.substring(0, 10)) {
              this.selectItemTime = [item]
            }
          });
        } else {
          this.selectItemTime = val.length > 0 && [val[0][0]];
        }
      }
    },
    sortTypeName: function (val) {
      this.selectItemsort = val.length > 0 && [val[0][0]];
    },
    starTime(val) {
      if (val) {
        this.mintime = val
      } else {
        this.mintime = ''
      }
    },
    endTime(val) {
      if (val) {
        this.maxtime = val
      } else {
        this.maxtime = ''
      }
    },
    isShowClockSearch(val) {
      if (this.selectTittle.length == 0 && this.workType == 1) {
        this.calendar()
      } else if (this.selectTittle.length > 0 && this.workType == 1 && this.isStudent == 1) {
        if (this.selectTittle.length > 0) {
          this.selectTittle[0].forEach(item => {
            if (this.day == item.substring(0, 10)) {
              this.selectItemTime = [item]
            }
          });
        }
      }
      if (this.workType == 2 && this.workList.length == 0) {
        this.workListName = '所有作业'
      } else if (this.workType == 3 && this.workList.length == 0) {
        this.workListName = '所有关卡'
      }
      if (this.sortTypeName.length == 0) {
        let nameArr = this.isStudent != 1 ? ['按默认', '已评论', '未评论', '精选', '非精选'] : ["按默认", "已点赞", "未点赞", "精选", '非精选']
        this.sortTypeName.push(nameArr)
      }
    }
  },
  activated() {
  },
  methods: {
    showClass() {
      this.getClassList()
      this.isShowClockchoose = true
    },
    showWorkList() {
      this.searchWorkList()
      this.isShowWorkListchoose = true
    },
    clockChooseSure(name, id) {
      this.className = name
      this.classId = id
    },
    clockWorkerListSure(name, id) {
      this.workListName = name
      this.hwId = id
    },
    clockWorkListHide() {
      this.isShowWorkListchoose = false
    },
    clockChooseHide() {
      this.isShowClockchoose = false
    },
    calendar() {
      if (this.workType == 1) {
        let getUrl = `signCard/calendar/${this.clockInId}`
        utilJs.getMethod(
        global.apiurl + getUrl,
        (res) => {
          let timeDate = res.timeSection
          let timeArr = []
          if (this.isStudent != 1) {
            timeArr.push('全部主题')
          }
          timeDate.filter(item => {
            timeArr.push(item.dayText)
          });
          this.selectTittle.push(timeArr)
        })
      }
    },
    searchWorkList() {
      if (this.workList.length == 0) {
        let postUrl = `${global.apiurl}signCard/searchWorkList/${this.clockInId}`;
        utilJs.getMethod(
          postUrl,
          (res) => {
            let classListData = res
            let classListFist = {
                  hwId: '',
                  name: this.workType == 2 ? "所有作业" : "所有关卡"
                }
            this.workList.push(classListFist)
            classListData.filter(item => {
              this.workList.push(item)
            });
          },
          (failRes) => {
          }
        );
      }
    },
    //获取分组
    getClassList () {
      if (this.classList.length == 0) {
        let postUrl = `${global.apiurl}signCard/classList/${this.clockInId}`;
        utilJs.getMethod(
          postUrl,
          (res) => {
            let classListData = res
            let classListFist = {
                  classId: '',
                  name: "所有成员"
                }
            this.classList.push(classListFist)
            classListData.filter(item => {
              item.key = item.classId
              this.classList.push(item)
            });
          },
          (failRes) => {
          }
        );
      }
    },
    changeSelectTime(val) {
      this.selectItemTime = val
    },
    changeSelectsort(val) {
      this.selectItemsort = val
    },
    removeSearch() {
      this.selectItemTime = this.workType == 1 ? [this.selectTittle[0][0]] : [];
      this.selectItemsort = [this.sortTypeName[0][0]];
      this.starTime = '' //选择的开始时间情况
      this.endTime = '' //选择的结束时间情况
      this.className = '所有成员'
      this.classId = ''
      this.workListName = this.workType == 2 ? '所有作业' : '所有关卡'
      this.hwId = ''
    },
    sureSearch() {
      let sort = ''
      if (this.selectItemsort[0] == '按默认') {
        sort = ''
      } else if (this.selectItemsort[0] == '已评论') {
        sort = 1
      } else if (this.selectItemsort[0] == '未评论') {
        sort = 2
      } else if (this.selectItemsort[0] == '精选') {
        sort = 3
      } else if (this.selectItemsort[0] == '非精选') {
        sort = 4
      } else if (this.selectItemsort[0] == '已点赞') {
        sort = 5
      } else if (this.selectItemsort[0] == '未点赞') {
        sort = 6
      }
      this.$emit('sureSearch', this.selectItemTime[0], sort, this.starTime, this.endTime, this.classId, this.hwId)
      this.$emit('clockSearchHide')
    },
    clockSearchHide() {
      this.$emit('clockSearchHide')
    }
  }
}
</script>

<style scoped>
.c-pv14 {
  padding-top: 0.35rem;
  padding-bottom: 0.35rem;
}
.c-lh52 {
  line-height: 1.3rem;
}
input {
  font-size: 0.6rem;
  padding: 0 0.4rem 0 0.4rem;
  border: 0;
  background: none;
  outline: none;
}
input::-webkit-input-placeholder {
  font-size: 0.55rem;
  /* WebKit browsers 适配谷歌 */
  color: #999999;
}
input:-moz-placeholder {
  font-size: 0.55rem;
  /* Mozilla Firefox 4 to 18 适配火狐 */
  color: #999999;
}
input::-moz-placeholder {
  font-size: 0.55rem;
  /* Mozilla Firefox 19+ 适配火狐 */
  color: #999999;
}
input:-ms-input-placeholder {
  font-size: 0.55rem;
  /* Internet Explorer 10+  适配ie*/
  color: #999999;
}
.selectPicker >>> .weui-cell__ft {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell {
  padding: 0 !important;
}
.selectPicker >>> .weui-cell__ft:after {
  display: none !important;
}
.search-fixed {
  position: fixed;
  width: 100%;
  z-index: 100;
  max-width: 640px;
}
.selectDate >>> .vux-cell-value {
  color: #333333;
}
.selectPicker >>> .vux-cell-value {
  color: #333333;
}
.selectDate >>> .vux-input-icon {
  display: none !important;
}
.selectDate >>> .weui-cell__ft {
  text-align: center;
  padding: 0 !important;
}
.selectDate >>> .weui-cell {
  padding: 0 !important;
}
.selectDate >>> .weui-cell__ft:after {
  display: none !important;
}
.clockSearchBox >>> .vux-popup-dialog{
  z-index: 9999 !important;
}
.clockSearchBox >>>.vux-popup-picker-select{
  text-align: left !important;
}
.clockSearchBox {
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
}
.searchead{
  height: 2rem;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #333333;
    font-size: 0.7rem;
    text-align: center;
    font-weight: bold;
}
</style>